import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wallet_utils/button_style.dart';
import 'package:wallet_utils/color.dart';
import 'package:wallet_utils/ht_appbar.dart';
import 'package:wallet_utils/text_style.dart';
import 'logic.dart';

class SettingPwdPage extends StatelessWidget {
  final logic = Get.put(SettingPwdLogic());
  final state = Get.find<SettingPwdLogic>().state;

  FocusNode mobileFocusNode = FocusNode();
  FocusNode pwdFocusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: Material(
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/bg_login.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: GetBuilder<SettingPwdLogic>(builder: (logic) {
            return Scaffold(
              backgroundColor: Colors.transparent,
              body: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    margin: EdgeInsets.only(
                      top: ScreenUtil().statusBarHeight + 12.h,
                      left: 15.w,
                    ),
                    child: backWidgetAction(backAction: () {
                      Get.back();
                    }),
                  ),
                  SizedBox(
                    height: 56.h,
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 30.w),
                    child: Text(
                      '设置新密码',
                      style: TextStyleUtils.style000000(fontSize: 27.w, fontWeight: FontWeight.bold),
                    ),
                  ),
                  GetBuilder<SettingPwdLogic>(builder: (logic) {
                    return accountInput();
                  }),
                  GetBuilder<SettingPwdLogic>(builder: (logic) {
                    return smsCodeInput();
                  }),

                  loginBtn(),
                ],
              ),
            );
          }),
        ),
      ),
    );
  }

  //登录按钮
  Widget loginBtn() {
    return Container(
      margin: EdgeInsets.only(left: 30.w, right: 30.w, top: 50.w),
      width: double.infinity,
      height: 44.w,
      child: ElevatedButton(
          style: ButtonStyleUtils.buttonStyleF65247(),
          onPressed: () {

          },
          child: Text("确定", style: TextStyleUtils.styleFFFFFF(fontSize: 14))),
    );
  }

  ///账号输入框
  Widget accountInput() {
    return Container(

      margin: EdgeInsets.only(left: 30.w, right: 30.w),
      child: Column(
        children: [
          TextField(
            controller: state.pwdController,
            focusNode: mobileFocusNode,
            inputFormatters: [LengthLimitingTextInputFormatter(11), FilteringTextInputFormatter.digitsOnly],
            cursorColor: ColorManager.colorF65247,
            cursorWidth: 1.w,
            style: TextStyle(fontWeight: FontWeight.w500, color: ColorManager.color2A2A2A),
            maxLength: 11,
            decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: EdgeInsets.only(top: 25.w),
              labelStyle:
              TextStyle(wordSpacing: 10.w, color: ColorManager.color2A2A2A, fontSize: 15.sp, fontWeight: FontWeight.w400),
              counterText: "",
              hintText: '请输入新密码',
              hintStyle: TextStyle(fontWeight: FontWeight.w400, color: ColorManager.colorCCCCCC, fontSize: 15.sp),
              focusColor: ColorManager.colorCCCCCC,
              hoverColor: ColorManager.colorCCCCCC,
              fillColor: ColorManager.colorCCCCCC,
//                contentPadding: EdgeInsets.all(10.0),
            ),
            onTap: () {
            },
            onChanged: (value) {
            },
          ),
          Container(
            margin: EdgeInsets.only(top: 12.w,),
            width: double.infinity,
            height: 0.5.w,
            color: ColorManager.colorE7E8E9,
          ),

        ],
      ),
    );
  }

  ///验证码输入框
  Widget smsCodeInput() {
    return Container(
      margin: EdgeInsets.only(left: 30.w, right: 30.w),
      child: Column(
        children: [
          TextField(
            controller: state.confirmController,
            focusNode: pwdFocusNode,
            cursorColor: ColorManager.colorF65247,
            cursorWidth: 1.w,
            style: TextStyle(fontWeight: FontWeight.w500, color: ColorManager.color2A2A2A),
            inputFormatters: [LengthLimitingTextInputFormatter(6), FilteringTextInputFormatter.digitsOnly],
            decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: EdgeInsets.only(top: 25.w),

              labelStyle:
              TextStyle(wordSpacing: 10.w, color: ColorManager.color2A2A2A, fontSize: 15.sp, fontWeight: FontWeight.w400),
              counterText: "",
              // labelText: "手机号码",
              hintText: '请确认密码',
              hintStyle: TextStyle(fontWeight: FontWeight.w400, color: ColorManager.colorCCCCCC, fontSize: 15.sp),
              focusColor: ColorManager.colorCCCCCC,
              hoverColor: ColorManager.colorCCCCCC,
              fillColor: ColorManager.colorCCCCCC,
//                contentPadding: EdgeInsets.all(10.0),
            ),
            onTap: () {

            },
            onChanged: (value) {

            },
          ),
          Container(
            margin: EdgeInsets.only(top: 12.w,),
            width: double.infinity,
            height: 0.5.w,
            color: ColorManager.colorE7E8E9,
          ),
        ],
      ),
    );
  }
}
